/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { PureComponent } from 'react';
import { openModalMessage } from '../../../components/TableCustomize'
import * as CommissioningManagementService from '../../../axios/CommissioningManagement'
import { typeList } from '../../../utils/global'
import {
    Row,
    Col,
    Form,
    Select,
    Input,
    Alert,
    Spin
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select

class AddFrom extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            spinning: false,
            formData1: {},
            typeList: [],
            codeList: [],
            nameList: [],
            fromType: undefined,
            fromCode: undefined,
            fromName: undefined
        }
    }
    componentDidMount() {
        const { formData } = this.props;
        // 查询试机模板
        this.setState({ spinning: true, typeList })
        CommissioningManagementService.findMachineTemplate(`batchNo=${formData.batchNo[0]}`).then(res => {
            // console.log(res.data.data, '查询试机模板');
            if (res.data.code !== 200) {
                openModalMessage('warning', res.data.msg);
                return;
            }
            this.setState({ formData1: res.data.data, spinning: false });
        }).catch(err => {
            openModalMessage('error', err.message);
        })
    }
    handleChange1 = (value) => {
        const { formData1 } = this.state
        let list = formData1.list

        if (!value) {
            this.setState({ nameList: [], codeList: [] })
            this.props.form.setFieldsValue({ fromCode: undefined, fromName: undefined, fromType: undefined, })
            return
        }

        let fromCode = this.props.form.getFieldValue('fromCode')
        let fromName = this.props.form.getFieldValue('fromName')
        if (fromCode || fromName) {
            this.props.form.setFieldsValue({ fromCode: undefined, fromName: undefined })
        }

        let codeList = [], nameList = []
        for (let i in list) {
            let item = list[i]
            if (item.fromType == value.key) {
                codeList.push(item)
                nameList.push(item)
            }
        }
        this.setState({ nameList, codeList })
        this.props.form.setFieldsValue({ fromType: value })
    }
    handleChange2 = (value) => {
        const { formData1, typeList } = this.state
        let list = formData1.list

        if (!value) {
            this.setState({ nameList: [], codeList: [] })
            this.props.form.setFieldsValue({ fromCode: undefined, fromName: undefined, fromType: undefined, })
            return
        }

        let nameList = []
        for (let i in list) {
            let item = list[i]
            if (item.fromCode == value.key) {
                nameList.push(item)
            }
        }
        let a = typeList.find(item => item.id == nameList[0].fromType)
        this.setState({ nameList, })
        this.props.form.setFieldsValue({
            fromCode: value,
            fromName: { key: nameList[0].fromCode, label: nameList[0].fromName },
            fromType: { key: nameList[0].fromType, label: a.value }
        })
    }
    handleChange3 = (value) => {
        const { formData1, typeList } = this.state
        let list = formData1.list

        if (!value) {
            this.setState({ nameList: [], codeList: [] })
            this.props.form.setFieldsValue({ fromCode: undefined, fromName: undefined, fromType: undefined, })
            return
        }

        let codeList = []
        for (let i in list) {
            let item = list[i]
            if (item.fromName == value.label) {
                codeList.push(item)
            }
        }
        let a = typeList.find(item => item.id == codeList[0].fromType)
        this.setState({ codeList, })
        this.props.form.setFieldsValue({
            fromName: value,
            fromCode: { key: codeList[0].fromCode, label: codeList[0].fromCode },
            fromType: { key: codeList[0].fromType, label: a.value }
        })
    }

    render() {
        const { form: { getFieldDecorator } } = this.props;
        const { formData1, fromType, fromCode, fromName, typeList, codeList, nameList, spinning } = this.state

        const formItemLayout = {
            // 抽屉里面Form。二列的布局比例
            labelCol: {
                span: 8
            },
            wrapperCol: {
                span: 12
            }
        };
        const a = typeList.find(item => item.id == formData1.fromType)
        return (
            <Form >
                <Row>
                    <Alert message="更换模板后，当前记录的质检信息将被清空，请谨慎操作！" type="info" showIcon />
                </Row>
                <Spin spinning={spinning}>
                    <Row>
                        <Col span={24}>
                            <FormItem {...formItemLayout} label={'ID'} hidden>
                                {getFieldDecorator('testMachineId', {
                                    initialValue: formData1.testMachineId || '',
                                    getValueFromEvent: (event) => {
                                        return event.target.value.replace(/\s+/g, "")
                                    },
                                })(<Input />)}
                            </FormItem>
                        </Col>
                        <Col span={24}>
                            <FormItem {...formItemLayout} label={'机型'}>
                                <div>{formData1.model}</div>
                            </FormItem>
                        </Col>
                        <Col span={24}>
                            <FormItem {...formItemLayout} label={'当前表单类型'}>
                                <div>{a?.value}</div>
                            </FormItem>
                        </Col>
                        <Col span={24}>
                            <FormItem {...formItemLayout} label={'当前表单编码'}>
                                <div>{formData1.fromCode}</div>
                            </FormItem>
                        </Col>
                        <Col span={24}>
                            <FormItem {...formItemLayout} label={'当前表单模板'}>
                                <div>{formData1.fromName}</div>
                            </FormItem>
                        </Col>
                        <Col span={24}>
                            <FormItem {...formItemLayout} label={'替换表单类型'}>
                                {getFieldDecorator('fromType', {
                                    initialValue: fromType || undefined,
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择表单类型'
                                        }
                                    ]
                                })(<Select
                                    placeholder='请选择表单类型'
                                    allowClear
                                    showSearch
                                    labelInValue
                                    filterOption={(input, option) =>
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                    onChange={this.handleChange1}
                                >
                                    {typeList && typeList.map(item => <Option key={item.id}>{item.value}</Option>)}
                                </Select>)}
                            </FormItem>
                            <FormItem {...formItemLayout} label={'替换表单编码'}>
                                {getFieldDecorator('fromCode', {
                                    initialValue: fromCode || undefined,
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择表单编码'
                                        }
                                    ]
                                })(<Select
                                    placeholder='请选择表单编码'
                                    allowClear
                                    showSearch
                                    labelInValue
                                    filterOption={(input, option) =>
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                    onChange={this.handleChange2}>
                                    {codeList.length > 0 ? codeList.map(item => <Option key={item.fromCode}>{item.fromCode}</Option>)
                                        : formData1.list && formData1.list.map(item => <Option key={item.fromCode}>{item.fromCode}</Option>)}
                                </Select>)}
                            </FormItem>
                            <FormItem {...formItemLayout} label={'替换表单名称'}>
                                {getFieldDecorator('fromName', {
                                    initialValue: fromName || undefined,
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择表单名称'
                                        }
                                    ]
                                })(<Select
                                    placeholder='请选择表单名称'
                                    allowClear
                                    showSearch
                                    labelInValue
                                    filterOption={(input, option) =>
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                    onChange={this.handleChange3}>
                                    {nameList.length > 0 ? nameList.map(item => <Option key={item.fromCode}>{item.fromName}</Option>)
                                        : formData1.list && formData1.list.map(item => <Option key={item.fromCode}>{item.fromName}</Option>)}
                                </Select>)}
                            </FormItem>
                        </Col>
                    </Row>
                </Spin>

            </Form>
        );
    }
}

export default Form.create()(AddFrom);
